<template>
    <userDialog
        v-model="visible"
        :dialogTitle="`查看${group_name}成员`"
        width="880px"
        @handleCloseDialog="close"
    >
        <template v-slot:userDiagContent>
            <dialogFormContent>
                <template #form_info="{ isShowInfoFold }">
                    <p class="info-des">
                        当前成员: {{ vieGroupUserRes.length }}
                    </p>
                    <div class="infinite-list" style="overflow: auto">
                        <el-table
                            :data="vieGroupUserRes"
                            border
                            style="width: 100%"
                            :header-cell-style="{
                                color: '#222222',
                                background: '#FBFDFF',
                            }"
                            :cell-style="{
                                color: '#606266',
                                background: '#FBFDFF',
                            }"
                            :row-style="{ height: '65px' }"
                        >
                            <el-table-column prop="username" label="用户名称" />
                            <el-table-column prop="realname" label="真实姓名" />
                            <el-table-column prop="phone" label="手机号" />
                            <el-table-column
                                prop="type_name"
                                label="用户角色"
                                width="473"
                            />
                        </el-table>
                    </div>
                </template>
            </dialogFormContent>

            <div class="confirmBtn">
                <el-button type="primary" @click="close()"> 关闭 </el-button>
            </div>
        </template>
    </userDialog>
</template>

<script setup lang="ts">
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const props = defineProps({
    vieGroupUserRes: {
        required: false,
        default: () => [] as any,
    },
    group_id: {
        required: false,
        default: () => [] as any,
    },
    group_name: {
        required: false,
        default: () => [] as any,
    },
});

function close() {
    visible.value = false;
}
</script>

<style lang="scss" scoped>
.info-des {
    line-height: 25px;
    font-size: 14px;
    color: #222222;
    width: 100%;
    flex-wrap: nowrap;
    overflow-y: scroll;
    margin-top: 9px;
    margin-bottom: 15px;
}
.infinite-list {
    max-height: 520px;
    width: 808px;
    padding: 0;
    margin: 0;
    list-style: none;
    &::-webkit-scrollbar-thumb:hover {
        width: 16px;
        height: 80%;
        background-color: #b0abab !important;
    }
}
// 15px  16px
.confirmBtn {
    margin-top: 20px;
    @include flexLayout;
    .el-button {
        padding: 10px 42px;
    }
}
</style>
